<!--业务详单查询-->
<template>
	<div class="app-container business-list">
		<!--高级查询弹窗-->
		<div id="advanced-query-form-dialog">
			<el-dialog v-model="ui.dialogQueryVisible" custom-class="advanced-query-class" title="条件：" :show-close="false">
				<el-tooltip effect="light" content="该查询为精确查询，请输入准确的查询条件" placement="top-start">
					<i class="question-icon ico-wen">
						<svg-icon icon-class="question"></svg-icon>
					</i>
				</el-tooltip>
				<div>
					<el-form id="advanced-el-form" ref="conforderform" :model="advancedQueryform" inline>
						<!-- 渲染问题列表 -->
						<section v-for="(value, index) in advancedQueryform.queryColumn" :key="index">
							<section v-if="index === 0" class="yd-flex">
								<el-form-item label="字段" label-width="120px">
									<div>
										<el-select v-model="advancedQueryform.queryColumn[index].column" popper-class="select-coutom" :popper-append-to-body="false">
											<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
										</el-select>
									</div>
								</el-form-item>
								<el-form-item label="值" label-width="40px">
									<el-input v-model="advancedQueryform.queryColumn[index].value" auto-complete="off" style="width: 200px"></el-input>
								</el-form-item>
								<svg-icon icon-class="orderadd" class="icon-style" circle @click="addItems()"></svg-icon>
							</section>
							<section v-if="index > 0" class="yd-flex">
								<el-form-item style="width: 70px">
									<div class="yd-flex">
										<el-select
											v-model="advancedQueryform.queryColumn[index].operator"
											popper-class="select-coutom"
											size="small"
											:popper-append-to-body="false"
										>
											<el-option label="并且" value="and"></el-option>
											<el-option label="或者" value="or"></el-option>
										</el-select>
									</div>
								</el-form-item>

								<el-form-item label="字段">
									<el-select v-model="advancedQueryform.queryColumn[index].column" popper-class="select-coutom" :popper-append-to-body="false">
										<el-option
											v-for="item in options"
											:key="item.value"
											style="background-color: #ff000000"
											:label="item.label"
											:value="item.value"
										></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="值" label-width="40px">
									<el-input v-model="advancedQueryform.queryColumn[index].value" auto-complete="off" style="width: 200px"></el-input>
								</el-form-item>
								<svg-icon icon-class="orderdel" class="icon-style" circle @click="rmItems(index)"></svg-icon>
							</section>
						</section>
					</el-form>
					<div style="display: flex; justify-content: center">
						<el-row class="mt-20">
							<el-button type="primary" @click="advancedQuery">确认</el-button>
							<el-tooltip effect="light" content="去除高级查询条件筛选" placement="right">
								<el-button @click="clearQuery">取消</el-button>
							</el-tooltip>
						</el-row>
					</div>
				</div>
			</el-dialog>
		</div>

		<yd-form class="yd-form-wraper" :options="formOptions" :model="queryParams" @form-init="formInited" @search="formInited">
			<template #form-btn>
				<el-button type="primary" icon="Search" @click="searchHandler">查 询</el-button>
				<el-button style="margin-left: 15px" type="primary" :disabled="!tableData.length" @click="downloadHandler">下载</el-button>
				<el-button style="margin-left: 15px" type="primary" @click="gridLabelBtnClick">自定义列</el-button>
				<el-button type="primary" @click="advancedQueryBtnClick">高级查询</el-button>
			</template>
		</yd-form>

		<el-tabs v-model="queryParams.activeTabs" size="small" @tab-change="onTabChange">
			<el-tab-pane label="定性" name="tab_0">
				<!--列表-->
				<YdCard>
					<YdTable
						:formData="queryParams"
						:tableConfig="tableConfig"
						:tableData="tableData"
						@sizeChangeHandler="queryEnsureData(true)"
						@currentChangeHandler="queryEnsureData()"
						@sortChangeHandler="queryEnsureData()"
					>
					</YdTable>
				</YdCard>
			</el-tab-pane>
			<el-tab-pane label="非定性" name="tab_1">
				<!--列表-->
				<YdCard>
					<YdTable
						:formData="queryParams"
						:tableConfig="isUnsureTableConfig"
						:tableData="isUnsureTableData"
						@sizeChangeHandler="queryUnsureData(true)"
						@currentChangeHandler="queryUnsureData()"
						@sortChangeHandler="queryUnsureData()"
					>
					</YdTable>
				</YdCard>
			</el-tab-pane>
		</el-tabs>

		<!-- 自定义列弹出层 -->
		<!-- <custom-column ref="customColumnRef" pageType="detail"></custom-column> -->
	</div>
</template>
<script setup name="bpmBusinessDetailQuery" lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { getGrid, getColumn, saveColumn, download } from '@/api/bpm/business/business_detail_list_api';
import { downloadFromBlob, parseTime } from '@/utils/common';
import CustomColumn from '@/components/CustomColumn/index.vue';
import useUserStore from '@/store/modules/userinfo';
import { onMounted, ref, reactive, getCurrentInstance, onActivated, computed, watch, nextTick } from 'vue';
const instance = getCurrentInstance();
const proxy = instance?.proxy;

const route = useRoute();
const router = useRouter();

// 用于获取dom的实例
const systemRef = ref(null);
const customColumnRef = ref<InstanceType<typeof CustomColumn>>();
const alarmTypeRef = ref(null);

const options = ref([
	{ label: '营业员工号', value: 'operatorId' },
	{ label: '请求IP', value: 'requestIp' },
	{ label: '响应IP', value: 'responseIp' },
	{ label: '自定义返回码', value: 'customResCode' },
	{ label: '用户标识', value: 'userIdentify' },
]);
const downloading = ref(false);
const is_alarmshow = ref(false);
const alarmTypeId = ref('');
const loading = ref(false);

// 表单配置
const formOptions = ref<FormOptionType>([
	{
		type: 'select',
		prop: 'systemId',
		label: '业务系统',
		api: {
			name: 'queryAppSystemOptions',
			params: { isStatus: 1 },
		},
		cascaders: [
			{
				cascadersParams: 'businessCodeList',
				api: {
					name: 'queryBusinessOptions',
				},
			},
		],
	},
	{
		type: 'select',
		prop: 'businessCodeList',
		label: '业务名称',
		attrs: {
			multiple: true,
		},
	},
	{
		type: 'select',
		prop: 'completionState',
		label: '业务完整',
		isInitValue: false,
		children: [
			{
				label: '完整',
				value: 1,
			},
			{
				label: '不完整',
				value: 0,
			},
		],
		// attrs: {
		// 	multiple: true,
		// },
	},
	{
		type: 'select',
		prop: 'dealState',
		label: '业务状态',
		isInitValue: false,
		children: [
			{
				label: '失败',
				value: 0,
			},
			{
				label: '成功',
				value: 1,
			},
		],
		// attrs: {
		// 	multiple: true,
		// },
	},
	{
		type: 'select',
		prop: 'isAlarm',
		label: '告警状态',
		isInitValue: false,
		children: [
			{ label: '正常', value: 0 },
			{ label: '告警', value: 1 },
		],
		// attrs: {
		// 	multiple: true,
		// },
	},
	{
		type: 'select',
		prop: 'alarmTypeId',
		label: '告警类型',
		isInitValue: false,
		api: {
			name: 'queryBaseIndicatorsList',
			params: {},
		},
		// attrs: {
		// 	multiple: true,
		// },
	},

	{
		type: 'select',
		prop: 'dataCenterList',
		label: '数据中心',
		api: {
			name: 'queryDataCenter',
		},
		isInitValue: false,
		cascaders: [
			{
				cascadersParams: 'areaCodeList',
				api: {
					name: 'queryCityAreaOptions',
				},
			},
		],
	},
	{
		type: 'select',
		prop: 'areaCodeList',
		label: '归属城市',
		attrs: {
			multiple: true,
		},
	},
	{
		type: 'date-picker',
		prop: 'dateRange',
		span: 8,
		dateType: 'datetimerange',
		label: '时间范围',
		enableCrossDay: true,
	},
	{
		type: 'input',
		prop: 'exclusiveIndicator',
		label: '专属指标',
	},
]);

//查询参数
let queryParams = reactive<FormModelType>({
	pageNum: 1,
	pageSize: 10,
	advancedQuery: [],
	activeTabs: 'tab_0', //默认展示定性选项卡
});

//页面控制
const ui = reactive({
	//高级查询弹窗
	dialogQueryVisible: false,
	//自定义列弹窗
	dialogTableVisible: false,
});
//高级查询表单
const advancedQueryform = reactive({
	queryColumn: [{ operator: 'and', column: 'operatorId', value: '' }],
});
//高级查询下拉列
// const  options = options
//自定义列表弹窗展示字段
const columns = ref([]);

const tableData = ref<anyObj[]>([]);

const tableConfig = reactive<TableConfigType>({
	columns: [
		{ prop: 'businessName', label: '业务名称', width: 120 },
		{
			prop: 'customResCode',
			label: '自定义返回码',
			width: 120,
			align: 'center',
			formatter: (row: any, value: any) => {
				return value || '- -';
			},
		},
		{ prop: 'userIdentify', label: '用户标识', width: 120 },
		{
			prop: 'startTime',
			label: '开始时间',
			sortable: true,
			width: 170,
			// formatter: (row, column) => {
			//   return parseTime(row.startTimeUsec / 1000);
			// },
		},
		{
			prop: 'endTime',
			label: '结束时间',
			sortable: true,
			width: 170,
			// formatter: (row, column) => {
			//   return parseTime(row.endTimeUsec / 1000);
			// },
		},
		{ prop: 'dealState', label: '业务状态', width: 120 },
		{ prop: 'completionState', label: '完整性', width: 120 },
		{
			prop: 'dealTime',
			label: '办理时长',
			sortable: true,
			width: 170,
		},
		{
			prop: 'clientFreeTime',
			label: '客户端空闲时长',
			sortable: true,
			width: 170,
		},
		{
			prop: 'alarmCount',
			label: '告警数',
			sortable: true,
			// color: '#fe5578',
			width: 90,
		},
		{
			prop: 'exclusiveIndicator',
			label: '专属指标',
			width: 120,
			hide: true,
			isExclusive: true,
		},
		{
			label: '操作',
			prop: '',
			operation: [
				{
					text: '明细',
					handler: (scope) => {
						handleDetails(scope.row);
					},
				},
			],
		},
	],
	pagination: {
		pageNum: 1,
	},
});

const isUnsureTableData = ref<anyObj[]>([]);

const isUnsureTableConfig = reactive<TableConfigType>({
	columns: [
		{ prop: 'businessName', label: '业务名称' },
		{
			prop: 'customResCode',
			label: '自定义返回码',
			align: 'center',
			formatter: (row: any, value: any) => {
				return value || '- -';
			},
		},
		{ prop: 'userIdentify', label: '用户标识' },
		{
			prop: 'startTime',
			label: '开始时间',
			sortable: true,
			width: 170,
			// formatter: (row, column) => {
			//   return parseTime(row.startTimeUsec / 1000);
			// },
		},
		{
			prop: 'endTime',
			label: '结束时间',
			sortable: true,
			width: 170,
			// formatter: (row, column) => {
			//   return parseTime(row.endTimeUsec / 1000);
			// },
		},
		{ prop: 'dealState', label: '业务状态', width: 120 },
		{ prop: 'completionState', label: '完整性', width: 120 },
		{
			prop: 'dealTime',
			label: '办理时长',
			sortable: true,
			width: 170,
		},
		{
			prop: 'clientFreeTime',
			label: '客户端空闲时长',
			sortable: true,
			width: 170,
		},
		{
			prop: 'alarmCount',
			label: '告警数',
			sortable: true,
			// color: '#fe5578',
			width: 90,
		},
		{
			prop: 'exclusiveIndicator',
			label: '专属指标',
			width: 120,
			hide: true,
			isExclusive: true,
		},
	],
	pagination: {
		pageNum: 1,
	},
});

const downloadStartTime = ref('');
const downloadEndTime = ref('');

watch(
	() => queryParams.isAlarm,
	(val) => {
		if (val === '1' || val === undefined) {
			is_alarmshow.value = true;
			// if (queryParams.alarmTypeId === undefined || queryParams.alarmTypeId === '' || queryParams.alarmTypeId === 0 || queryParams.alarmTypeId === '0') {
			// 	// alarmTypeRef.value.setOptions([]);
			// }
		} else {
			is_alarmshow.value = false;
		}
	}
);
watch(
	() => queryParams.alarmTypeId,
	(val) => {
		alarmTypeId.value = val;
	}
);
// watch(
// 	() => queryParams.businessCodeList,
// 	(val) => {
// 		console.log('watch---', val);
// 	},
// 	{
// 		deep: true,
// 	}
// );

initQuery(route.query, queryParams);

onMounted(() => {
	nextTick(() => {
		customColumnRef.value?.useCustomColumn('bpm3.customField.businessDetailList', tableConfig.columns);
	});
});

// 格式化传过来的参数
function initQuery(query: anyObj, formData: FormModelType) {
	try {
		let data = JSON.parse(query.data);
		for (let key in data) {
			formData[key] = data[key];
			console.log('------', data[key]);
			console.log('------', formData[key]);
		}
		// console.log('nintquery-----', data);
		console.log('nintquery-----', data);
		console.log('nintquery-----', formData);
	} catch {
		for (let key in query) {
			formData[key] = query[key];
		}
	}
	if (formData.systemId) {
		formData.systemId += '';
	}
}

// 表单初始化完成调用
function formInited() {
	initQuery(route.query, queryParams);
	console.log('formInited', queryParams);
	is_alarmshow.value = true;
	initParams();
	queryEnsureData(true);
	queryUnsureData(true);
}

function onTabChange() {
	initParams();
}

/**
 * 初始化参数
 */
function initParams() {
	queryParams.pageNum = 1;
	queryParams.pageSize = 10;
	queryParams.advancedQuery = [];
}

/**
 * 搜索按钮
 */
function searchHandler() {
	if (queryParams.activeTabs === 'tab_0') {
		queryEnsureData(true);
	} else {
		queryUnsureData(true);
	}
}

function customCellClass(row: any) {
	if (row.column.label === '告警数') {
		return 'indicator-count';
	}
}
function clearData(data: any) {
	for (let i of tableConfig.columns) {
		if (data.label === i.label) {
			i.label = '';
		}
	}
}

/**
 * 列表查询-定性
 */
//
function queryEnsureData(initPageNum?: boolean) {
	if (initPageNum) {
		queryParams.pageNum = 1;
	}
	queryParams.isUnsure = 0;

	downloadStartTime.value = queryParams.startTime;
	downloadEndTime.value = queryParams.endTime;
	tableConfig.loading = true;
	getGrid(queryParams).then((res: ApiResponse) => {
		if (res.code === 0) {
			for (let i of res.data.data) {
				if (i.explain) {
					i.customResCode = i.customResCode + '(' + i.explain + ')';
				}
			}
			tableData.value = res.data.data;

			tableConfig.pagination!.total = res.data.total;
			if (!(res.msg === 'success')) {
				proxy?.$message.warning(res.msg);
			}
		} else {
			tableData.value = [];
			tableConfig.pagination!.total = 0;
		}
		tableConfig.loading = false;
	});
}

/**
 * 列表查询-未定性
 */
//
function queryUnsureData(initPageNum?: boolean) {
	if (initPageNum) {
		queryParams.pageNum = 1;
	}
	queryParams.isUnsure = 1;
	downloadStartTime.value = queryParams.startTime;
	downloadEndTime.value = queryParams.endTime;
	isUnsureTableConfig.loading = true;
	getGrid(queryParams).then((res: ApiResponse) => {
		if (res.code === 0) {
			for (let i of res.data.data) {
				if (i.explain) {
					i.customResCode = i.customResCode + '(' + i.explain + ')';
				}
			}
			isUnsureTableData.value = res.data.data;

			isUnsureTableConfig.pagination!.total = res.data.total;
			if (!(res.msg === 'success')) {
				proxy?.$message.warning(res.msg);
			}
		} else {
			isUnsureTableData.value = [];
			isUnsureTableConfig.pagination!.pageNum = 0;
		}
		isUnsureTableConfig.loading = false;
	});
}

/**
 * 下载
 */
function downloadHandler() {
	const list = [];
	const new_list = [];
	for (let i of tableConfig.columns) {
		if (!i.hide) {
			list.push(i.label);
			new_list.push(i.prop);
		}
	}

	queryParams.displayMappingFields = new_list;
	queryParams.displayFields = list;
	// queryParams.systemName = systemRef.value?.getSelected().label;''
	let data = {
		submitterId: useUserStore().userInfo?.userId,
		submitterName: useUserStore().userInfo?.username,
		submitTime: parseTime(new Date()),
		serviceCode: 'business-monitor',
		moduleName: 'BPM_WEB_MAIN',
		exportBtnName: '业务详单列表下载',
		docExportParameterJson: JSON.stringify(queryParams),
		exportFileName: '业务详单列表.xlsx',
		docHandleType: '3',
	};

	download(data).then((res) => {
		proxy?.$message.success('已加入下载队列，请查看＂↓＂');
	});
}
/**
 * 自定义列按钮
 */
function gridLabelBtnClick() {
	customColumnRef.value?.handleOpen('bpm3.customField.businessDetailList', tableConfig.columns);
}
/**
 * 高级查询按钮
 */
function advancedQueryBtnClick() {
	if (advancedQueryform.queryColumn.length === 0) {
		advancedQueryform.queryColumn.push({
			operator: 'and',
			column: 'operatorId',
			value: '',
		});
	}
	ui.dialogQueryVisible = true;
}
/**
 * 高级查询弹窗，查询按钮
 */
function advancedQuery() {
	let queryColumn: anyObj = [];
	//剔除空参
	advancedQueryform.queryColumn.forEach((row, index) => {
		//if (row.value.trim() !=== '') {
		queryColumn.push(row);
		// }
	});
	queryParams.advancedQuery = queryColumn;
	searchHandler();
	ui.dialogQueryVisible = false;
}
/**
 * 高级查询弹窗，清空查询按钮
 */
function clearQuery() {
	advancedQueryform.queryColumn = [];
	queryParams.advancedQuery = [];
	searchHandler();
	ui.dialogQueryVisible = false;
}
/**
 * 添加高级查询条件行
 */
function addItems() {
	advancedQueryform.queryColumn.push({
		operator: 'and',
		column: 'operatorId',
		value: '',
	});
	// }
}
/**
 * 删除高级查询条件行
 * @param index 下标
 */
function rmItems(index: number) {
	advancedQueryform.queryColumn.splice(index, 1);
	proxy?.$message.success('移除成功');
}
// /**
//  * 表单重置
//  */
// function resetColumnConfigForm(formName) {
//   $refs["tableConfig"].resetFields();
//   tableConfig.columns = JSON.parse(JSON.stringify(columns));
//   ui.dialogTableVisible = false;
// }
/**
 * 关闭，初始化数据
 */
function close() {
	ui.dialogTableVisible = false;
	ui.dialogQueryVisible = false;
	tableConfig.columns = JSON.parse(JSON.stringify(columns));
	advancedQueryform.queryColumn = [];
}
/**
 * 明细
 * @param row grid行
 */
function handleDetails(row: any) {
	router.push({
		path: '/business-monitor/monitor-query/business-list-detail',
		query: {
			data: JSON.stringify({
				businessDetailId: row.id,
				startTime: row.startTime,
				startTimeUsec: row.startTimeUsec,
				endTime: row.endTime,
				endTimeUsec: row.endTimeUsec,
			}),
		},
	});
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
:deep(.indicator-count) {
	color: #ff9a0c;
}

:deep(.el-icon-edit-outline) {
	background: url('@/assets/icons/png/edit.png') no-repeat;
	background-size: 18px;
	&:before {
		content: '';
		font-size: 16px;
		visibility: hidden;
	}
}
.el-form-item__label {
	line-height: 36px;
}
:deep(.el-dialog__header .el-dialog__title) {
	background-image: url('@/assets/images/bpm/dialog/init-title.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	color: #ffffff;
	font-size: 16px;
	display: inline-block;
	width: 140px;
	padding-left: 5px;
}
.el-checkbox {
	color: #606266;
	font-weight: 500;
	font-size: 14px;
	position: relative;
	cursor: pointer;
	display: inline-block;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin-right: 10px;
	margin-left: 20px;
}

/*高级查询弹框样式*/
.icon-style {
	font-size: 26px;
	color: #dcdfe6;
}
.question-style {
	font-size: 20px;
	color: #dcdfe6;
}
:deep(.advanced-query-class) {
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: calc(100% - 30px);
	max-width: calc(100% - 30px);
	min-width: 800px;
	.el-dialog__body {
		flex: 1;
		// overflow: auto;
	}
	.el-form-item {
		margin-bottom: 0;
	}
}
:deep(#advanced-query-form-dialog) {
	.el-dialog {
		border: 2px solid #2beded;
		box-shadow: 0px 0px 10px #2beded inset;
		background-color: rgba(19, 30, 60, 0.8);
	}
	.el-button {
		color: #1b2a5a;
		font-size: 16px;
		width: 160px;
	}
	.el-dialog__body {
		padding: 20px 60px;
	}
	.el-input__prefix {
		top: 5px;
		left: 10px;
	}
	.el-input__inner {
		text-align: center;
	}

	.el-select-dropdown__list {
		text-align: center;
	}
	.el-select-dropdown.el-popper {
		border: none;
		border-radius: 10px;
	}
	.el-scrollbar {
		color: #fff;
		border-radius: 6px;
		background-color: #121d40 !important;
	}
	.el-select-dropdown .popper__arrow {
		display: none;
	}
	.el-select-dropdown__item {
		text-align: center;
		color: #fff;

		&:before {
			content: '';
			position: absolute;
			top: 5px;
			right: 0.063rem;
			width: 0.25rem;
			height: 1.563rem;
			background: #2beded;
			vertical-align: center;
			transform: scaleX(0);
			transform-origin: right;
			-webkit-transition: -webkit-transform 475ms cubic-bezier(0.8, 0, 0.2, 1);
			transition: -webkit-transform 475ms cubic-bezier(0.8, 0, 0.2, 1);
		}
	}
	.el-select-dropdown__item.hover,
	.el-select-dropdown__item:hover {
		background-color: rgba(255, 154, 12, 0);

		&:before {
			transform: scaleX(1);
		}
	}
	.el-select-dropdown__item.selected {
		color: #2beded;
	}
	.select-coutom {
		top: auto !important;
		left: auto !important;
	}
	.yd-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.el-form--inline .el-form-item {
		margin-right: 10px;
		.el-input {
			width: auto;
		}
	}
}
#advanced-query-form-dialog .el-button--default {
	background-color: transparent;
	color: #2beded;
	border: 1px solid #2beded;
}
#advanced-query-form-dialog section {
	margin-bottom: 10px;
}
.mt-20 {
	margin-top: 20px;
}
#advanced-el-form {
	text-align: center;
}

/* 列表 */
:deep(#bus_detail_list_table) {
	tr:nth-child(even) {
		background: #1c2b5d;
	}

	.el-table td {
		border: none;
	}

	.el-table th.is-leaf {
		border-bottom: none;
	}

	.el-table__header-wrapper,
	.el-table__footer-wrapper {
		border-bottom: 2px solid #ddd;
		border-image: linear-gradient(to right, rgba(18, 30, 71, 0.85) 30%, rgba(12, 216, 223, 0.91), rgba(153, 247, 250, 0.91)) 20 20;
	}
}

/* 分页 */

.table-operation-text {
	// color: #ffffff;
	margin-left: 6px;
	text-decoration: underline;
	&:hover {
		color: #2beded;
	}
	&.active {
		color: #ff9a0c;
	}
}

:deep(.el-checkbox__input.is-checked) {
	background-color: #06cbcb;
}
.ico-wen {
	color: #fff;
	margin-top: -51px;
	position: absolute;
	z-index: 999;
	margin-left: 110px;
}

.style-split-yd-card {
	:deep(.el-card) {
		background-color: rgba(29, 39, 75, 0.31);
		border: unset;
		border-radius: 12px;
	}
}

.business-list {
	/*整个tab靠上*/
	:deep(.el-tabs__nav-scroll) {
		margin-top: 0px;
	}
	:deep(.el-tabs__nav) {
		margin-left: 12px;
	}
	/*整个tab选中样式*/
	:deep(.el-tabs__active-bar) {
		height: 0px;
	}
	:deep(.el-tabs--top .el-tabs__item.is-top:nth-child(2)) {
		padding-left: 20px;
	}
	:deep(.el-tabs--top .el-tabs__item.is-top:last-child) {
		padding-right: 20px;
	}
	/*tab文字样式设置白色*/
	:deep(.el-tabs__item) {
		color: #ffffff;
		font-size: 16px;
		font-weight: bold;
		height: 32px;
		line-height: 32px;
	}
	/*tab文字在选中时颜色*/
	:deep(.el-tabs__item.is-active) {
		color: #ffffff;
		border: 1px solid #2abcca;
		border-radius: 6px;
		background: #2abcca;
		background: -moz-linear-gradient(top, rgba(43, 237, 237, 0.1) 0%, rgba(43, 237, 237, 0.5) 100%);
		background: -webkit-linear-gradient(top, rgba(43, 237, 237, 0.1) 0%, rgba(43, 237, 237, 0.5) 100%);
		background: linear-gradient(top, rgba(43, 237, 237, 0.1) 0%, rgba(43, 237, 237, 0.5) 100%);
	}
	/*tab下面的线的颜色*/
	:deep(.el-tabs__nav-wrap::after) {
		background-color: transparent;
	}

	.relvanceDataIdClass {
		margin-bottom: 10px;
		color: #2beded;
	}
}
</style>
<style rel="stylesheet/scss" lang="scss">
.el-tooltip__popper.is-light {
	color: #1b2a5a;
	font-weight: 900;
}
</style>
